<template>
  <div>
        <el-form class="editDialog" ref="fieldForm" :model="fieldForm" :rules="fieldFormRules" label-width="100px">
          <el-row>
            <el-col :span="24">
              <el-form-item label="字段" prop="field">
                <el-input v-model="fieldForm.field" placeholder="请输入字段"/>
              </el-form-item>
            </el-col>
            <el-col :span="24">
              <el-form-item label="字段名称" prop="fieldName">
                <el-input v-model="fieldForm.fieldName" placeholder="请输入字段名称"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="字段类型" prop="fieldType">
                <el-select v-model="fieldForm.fieldType" placeholder="请选择字段类型">
                  <el-option
                    v-for="item in fieldTypeList"
                    :key="item.value"
                    :label="item.name"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>

<!--            <el-col :span="24">
              <el-form-item label="默认值" prop="defaultValue">
                <el-input v-model="fieldForm.defaultValue" placeholder="请输入默认值"/>
              </el-form-item>
            </el-col>

            <el-col :span="24">
              <el-form-item label="字段处理方法" prop="mainId">
                <el-select v-model="fieldForm.mainId" placeholder="请选择字段处理方法">
                  <el-option v-for="item in allListSupplierList"
                    :key="item.id"
                    :value="item.id"
                    :label="item.supplierName+'_'+item.name"
                  ></el-option>
                </el-select>
              </el-form-item>
            </el-col>-->

          </el-row>
        </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submitFieldForm">确 定</el-button>
      <el-button @click="cancelFieldForm">取 消</el-button>
    </div>
  </div>
</template>

<script>

import {
  updateExcPortConfig
} from "@/api/pm/excPortConfig";


import {fieldTypeList} from './js/type';

export default {
  name: "editField",
  props: {
    updateForm: Object,
    riskData: Object,
    allListSupplierList: {
      type: Array,
      default: ()=>[]
    }
  },
  data() {
    return {
      fieldForm: {
        parentId: '',
        ancestors: '',
        field: '',
        fieldName: '',
        fieldType: 1,
        dictCode: '',
        defaultValue: '',
        mainId: ''
      },
      fieldFormRules: {
        field: [
          {required: true, message: '字段不能为空', trigger: 'blur'}
        ],
        fieldName: [
          {required: true, message: '字段名称不能为空', trigger: 'blur'}
        ]
      },

      fieldTypeList: fieldTypeList,

      riskFormatObj: {},
      riskFormatTree: [],

      defaultProps: {
        children: 'children',
        label: 'label'
      },
    }
  },
  watch: {
    'updateForm': function (value) {
      this.fieldForm = Object.assign({}, value);
    }
  },
  created() {
    this.init();
  },
  methods: {
    // 初始化
    init() {
      this.fieldForm = Object.assign({}, this.updateForm);
      this.riskFormatObj = Object.assign({}, this.riskData);

      // this.riskFormatTree = this.dealRiskTree(this.riskFormatObj, '');
    },

    // 处理险种的格式，将其变成树形结构
    // dealRiskTree(data, path = '') {
    //
    //   let tree = [];
    //   for (let item in data) {
    //     let value = data[item];
    //
    //     if (typeof value == 'object') {
    //
    //       if (Array.isArray(value)) {
    //
    //         let chirldrens = [];
    //         for (let [key, field] of value.entries()) {
    //           let paths = path ? `${path}.${item}` : `${item}[${key}]`;
    //
    //           let children = this.dealRiskTree(field, paths);
    //
    //           chirldrens.push({
    //             label: '',
    //             field: '',
    //             name: '',
    //             path: paths,
    //             children: children
    //           })
    //         }
    //
    //         let paths = path ? `${path}.${item}` : item;
    //
    //         tree.push({
    //           label: item,
    //           field: item,
    //           name: '',
    //           path: paths,
    //           children: chirldrens
    //         });
    //       } else {
    //         let paths = path ? `${path}.${item}` : item;
    //
    //         let children = this.dealRiskTree(value, paths);
    //
    //         tree.push({
    //           label: item,
    //           field: item,
    //           name: '',
    //           path: paths,
    //           children: children
    //         });
    //       }
    //     } else {
    //
    //       tree.push({
    //         label: `${item}-${value}`,
    //         name: value,
    //         field: item,
    //         path: path ? `${path}.${item}` : item
    //       })
    //     }
    //   }
    //
    //   return tree;
    // },

    async submitFieldForm() {
      let res = await updateExcPortConfig({...this.fieldForm});
      this.$emit("updateFieldForm", res);
    },

    // 取消操作
    cancelFieldForm() {
      this.$emit("cancelFieldForm", false);
    },

    handleNodeClick(data) {
      this.fieldForm.mappingFormula = data.path;
    },

    // 获取字典展示名称
    getDictLabel(dict) {
      return `${dict.dictCode}_${dict.dictName}`;
    },
  }

}
</script>

<style lang="scss" scoped>
.editDialog {
  ::v-deep .el-input--medium {
    width: 300px !important;
  }
}
</style>
